<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画化组件</title>
    <script type="text/javascript" src="https://vuejs.org/js/vue.js"></script>
    <script type="text/javascript" src="Tween.js"></script>
    <style>
        .ball{
            width:3em;
            height: 3em;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 10em;
        }
    </style>
</head>
<body>

<div id="app">
    <input type="number" @input="move">
    <div class="ball" :style="'top:'+ height+'em'"></div>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            height: 0
        },
        methods:{
            move(event){
                const newHeight = Number(event.target.value);
                const _this = this;
                const animate = (time) =>{
                    requestAnimationFrame(animate);
                    TWEEN.update(time);
                }
                new TWEEN.Tween({H: this.height})
                    .easing(TWEEN.Easing.Bounce.Out)
                    .to({H: newHeight}, 1000)
                    .onUpdate(function () {
                        _this.height = this.H;
                    })
                    .start();
                animate();
            }
        }
    })
</script>

</body>
</html>